import React, { useState, useEffect, Fragment } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Button, Checkbox, Form, Input } from 'antd';
import useCountStore from '@/store/count/count.js';

const Effect = () => {
  const [searchTerm, ] = useState('11');
  const [category, ] = useState('22');
  const [count, setCount] = useState(0);
  const [query, setQuery] = useState('输入文字');
  const {  fetchTreeList,  } =
    useCountStore();
  const navigate = useNavigate();
  const onFinish = async (values) => {
    console.log('Success:', values);
    await fetchTreeList(values);
    localStorage.setItem('isToken', true);
    navigate('/dashboard');
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  useEffect(() => {
    const isToken = localStorage.getItem('isToken')
    if (isToken) {
      navigate('/dashboard')
    }
    
    // 模拟 componentDidMount
    // 组件挂载时执行一次
    console.log('组件已挂载');
    // fetchTreeList2()

    // 返回清理函数，模拟 componentWillUnmount
    return () => {
      console.log('组件将卸载');
    };
  }, [navigate]); // 空依赖数组表示只在组件挂载和卸载时执行

  useEffect(() => {
    console.log('组件已更新');
    // 组件更新后的操作
  }); // 没有依赖数组，每次渲染都执行
  useEffect(() => {
    console.log(searchTerm, category);
  }, [searchTerm, category]); // 缺少 category 依赖
  useEffect(() => {
    document.title = `You clicked ${count} times`;
    console.log(count);
  }, [count]);
  return (
    <Fragment>
      <div className="bg-green-500 justify-center w-full flex flex-col align-center text-center  text-red-500">
        <div>
          <Link
            to="/dashboard"
            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 cursor-pointer inline-block w-40"
          >
            进入仪表板
          </Link>
        </div>

        <div>
          <p>
            You clicked {count} times--{query}
          </p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      </div>
      <div>
        <input
          type="text"
          value={query}
          onChange={(event) => setQuery(event.target.value)}
        />
        <ul>
          {/* {data.hits.map(item => (
          <li key={item.objectID}>
            <a href={item.url}>{item.title}</a>
          </li>
        ))} */}
        </ul>

        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{
            // remember: true
            login_name: '',
            login_pwd: '',
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="login_name"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="login_pwd"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password />
          </Form.Item>

          {/* <Form.Item name="remember" valuePropName="checked" label={null}>
      <Checkbox>Remember me</Checkbox>
    </Form.Item> */}

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
        {/* { treeList2.map((item,index)=>(
      <p className="text-yellow-500 flex align-center justify-center" key={index}>{item.record_label}</p>

    ))} */}
      </div>
    </Fragment>
  );
};
export default Effect;
